<template>
  <div class="jyzt">
    <el-row :gutter="20">
      <el-col v-if="type == 'cyfcxm'" :sm="24" :lg="24">
        <el-card>
          <!-- <div class="center-title">产业扶持金额</div> -->
          <div class="type">
            <div v-for="item in list" :key="item.title" class="typeItem">
              <div class="title">{{ item.title }}</div>
              <div class="num">{{ statisticData[item.field] }}元</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col v-if="type == 'cyfcxm'" :sm="24" :lg="24" style="margin-top: 20px">
        <el-card>
          <el-form ref="queryFormRef" :model="queryParams" :inline="true" class="queryForm" label-width="80px">
            <el-form-item label="户主姓名" prop="hzxm">
              <el-input v-model="queryParams.hzxm" placeholder="请输入户主姓名" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="补贴年度" prop="btnf">
              <el-input v-model="queryParams.btnf" placeholder="请输入补贴年度" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item>
              <el-button sfzh="primary" icon="Search" @click="handleQuery">查询</el-button>
            </el-form-item>
          </el-form>
          <el-table
            class="zylbTable"
            :row-class-name="tableRowClassName"
            :highlight-current-row="false"
            :data="tableData"
            style="width: 100%"
            height="260"
          >
            <el-table-column prop="hzxm" width="160px" label="户主姓名" />
            <el-table-column prop="sfzh" label="身份证号" />
            <el-table-column prop="zzy" label="种植业(元)" />
            <el-table-column prop="yzy" label="养殖业(元)" />
            <el-table-column prop="ltcy" label="林特产业(元)" />
            <el-table-column prop="dscy" label="第三产业(元)" />
            <el-table-column prop="hj" label="合计(元)" />
            <el-table-column prop="year" label="补贴年度" />
          </el-table>
          <pagination
            v-if="tableTotal > 0"
            v-model:page="queryParams.pageNum"
            v-model:limit="queryParams.pageSize"
            :total="tableTotal"
            layout="total,sizes, prev, pager, next"
            @pagination="getTableData"
          />
        </el-card>
      </el-col>
      <!-- 衔接资金 -->
      <el-col v-else :sm="24" :lg="24" style="margin-top: 20px">
        <el-card>
          <el-form ref="queryFormRef" :model="queryParams" :inline="true" class="queryForm" label-width="80px">
            <el-form-item label="项目名称" prop="xmmc">
              <el-input v-model="queryParams.xmmc" placeholder="请输入项目名称" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="项目年度" prop="nf">
              <el-input v-model="queryParams.nf" placeholder="请输入项目年度" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item>
              <el-button sfzh="primary" icon="Search" @click="handleQuery">查询</el-button>
            </el-form-item>
          </el-form>
          <el-table
            class="zylbTable"
            :row-class-name="tableRowClassName"
            :highlight-current-row="false"
            :data="tableData"
            style="width: 100%"
            :height="500"
          >
            <el-table-column prop="xmbh" width="160px" label="项目编号" />
            <el-table-column prop="xmmc" label="项目名称" />
            <el-table-column prop="ysje" label="预算金额(元)" />
            <el-table-column prop="zbdw" label="中标单位" />
            <el-table-column prop="zbje" label="中标金额(元)" />
            <el-table-column prop="jsje" label="结算金额(元)" />
            <el-table-column prop="yzfje" label="已支付金额(元)" />
            <el-table-column prop="wzfje" label="未支付金额(元)" />
            <el-table-column prop="hqghqk" label="后期管护情况" />
            <el-table-column prop="remark" label="备注" />
            <el-table-column prop="year" label="项目年度" />
          </el-table>
          <pagination
            v-model:page="queryParams.pageNum"
            v-model:limit="queryParams.pageSize"
            :total="tableTotal"
            layout="prev, pager, next"
            @pagination="getTableData"
          />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import useMapStore from '@/store/modules/map';
const mapStore = useMapStore();
const cyzlValue = ref();
import * as echarts from 'echarts';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const $szxcapi = (proxy as any)?.$szxcapi;

const country = ref(useMapStore().szxcCountryText);
watch(
  () => useMapStore().szxcCountryText,
  (value) => {
    country.value = value;
    queryParams.value.ssc = value;
    // getTableData();
  }
);

const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  hzxm: '',
  btnf: '',
  xmmc: '',
  nf: '',
  ssc: country.value
});
const type = computed(() => {
  getTableData();
  return mapStore.activeTab;
});
const tableRowClassName = ({ row, rowIndex }: { row; rowIndex: number }) => {
  if (rowIndex % 2 == 0) {
    return 'js-row';
  } else {
    return 'sz-row';
  }
};
const list = ref([
  {
    title: '种植业',
    num: '12290',
    field: 'zzyje'
  },
  {
    title: '养殖业',
    num: '45310',
    field: 'yzyje'
  },
  {
    title: '林特产业',
    num: '12000',
    field: 'ltcyje'
  },
  {
    title: '第三产业',
    num: '0',
    field: 'dscyje'
  }
]);
const tableData = ref([
  {
    dm: '123',
    mc: '',
    dr: '',
    zs: '',
    xymc: '',
    szqy: '',
    sjzs: '',
    hyml: ''
  }
]);
const handleQuery = () => {
  getTableData();
};

// 统计数据
const statisticData = ref({});
const tableTotal = ref(0);

// 获取统计数据
const getStaticData = () => {
  $szxcapi.cyfcTjQuery({ ssc: country.value }).then((res: any) => {
    statisticData.value = res.data || {};
  });
};

// 获取表格数据
const getTableData = () => {
  let request = null;
  let params = {};
  if (mapStore.activeTab == 'cyfcxm') {
    params = {
      ssc: country.value,
      pageSize: queryParams.value.pageSize,
      pageNum: queryParams.value.pageNum,
      hzxm: queryParams.value.hzxm,
      btnf: queryParams.value.btnf
    };
    request = $szxcapi.cyfcQuery(params);
  } else {
    params = {
      ssc: country.value,
      pageSize: queryParams.value.pageSize,
      pageNum: queryParams.value.pageNum,
      xmmc: queryParams.value.xmmc,
      nf: queryParams.value.nf
    };
    request = $szxcapi.xjzjQuery(params);
  }
  request.then((res: any) => {
    tableData.value = res.rows || [];
    tableTotal.value = res.total;
  });
};

onMounted(() => {
  getStaticData();
  getTableData();
});
</script>

<style lang="scss" scoped>
.jyzt {
  width: 100%;
  height: 100%;
  font-family: 'DingTalk';
  .center-title {
    font-weight: 700;
    font-size: 20px;
  }
  .el-card {
    // background: rgb(15, 47, 83);
    background: #178af01a;
  }
  .type {
    width: 100%;
    display: flex;
    justify-content: space-between;
    height: 200px;
    .typeItem {
      margin: 0px 10px;
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      border-radius: 5px;
      font-size: 26px;
    }
    .typeItem:nth-child(1) {
      background: rgb(105, 133, 233);
      .num {
        color: rgb(245, 154, 35);
      }
    }
    .typeItem:nth-child(2) {
      background: rgb(127, 120, 234);
      .num {
        color: rgb(112, 182, 3);
      }
    }
    .typeItem:nth-child(3) {
      background: rgb(223, 130, 115);
      .num {
        color: rgb(245, 154, 35);
      }
    }
    .typeItem:nth-child(4) {
      background: rgb(98, 125, 233);
      .num {
        color: rgb(112, 182, 3);
      }
    }
  }
  .hyflpie {
    height: 100%;
    width: 100%;
  }
}
.zylbTable,
::v-deep.el-table {
  background-color: transparent;
  thead,
  tr,
  th.el-table__cell {
    font-size: 16px;
    text-align: center;
    color: #fff;
    padding: 0;
    height: 30px;
    background-color: #178af01a !important;
    border: 0px;
  }
  .el-table__body {
    .el-table__cell {
      cursor: pointer !important;
      text-align: center;
      padding: 0;
      border-bottom: 1px solid rgba(188, 227, 255, 0.49);
      border-image: linear-gradient(transparent, rgba(188, 227, 255, 0.9), transparent) 5 5;
    }
  }

  .el-table__body tr:hover > td.el-table__cell {
    background-color: transparent !important;
  }

  .el-table__inner-wrapper:before {
    background-color: transparent !important;
  }
}
</style>
